<template>
  <div class="recommend">
    <div class="title">
      热销特惠推荐
    </div>
    <button @click="clickHandler(index)" v-for="(item,index) in tabs" :key="index" class="tab-button" :class="{ active: currentTab === item }">{{tabArr[index]}}</button>
    <!-- 推荐列表 -->
    <list :list="list"></list>
  </div>
</template>

<script scoped>
import List from './List'
import { getRecommendList } from 'network/home.js'
export default {
  name: 'Recommend',
  data () {
    return {
      tabs: ['hot', 'special'],
      tabArr: ['热销推荐', '特惠推荐'],
      list: [],
      currentTab: 'hot',
      page: 1
    }
  },
  created () {
    this.getRecommendData(this.currentTab, this.page)
  },
  methods: {
    getRecommendData (type, page) {
      getRecommendList().then(res => {
        if (res.ret) {
          this.list = res.data[type]
        }
      })
    },
    clickHandler (index) {
      this.currentTab = this.tabs[index]
      this.getRecommendData(this.currentTab, this.page)
    }
  },
  components: {
    List
  }
}
</script>

<style lang='less' scoped>
  .title{
    line-height: 0.8rem;
    background-color: #eee;
    text-indent: .2rem;
  }
  .tab-button{
    margin-left: 0.2rem;
    margin-top: 0.2rem;
    padding: 0.18rem .24rem;
    font-size:.3rem;
    border:1px solid #ddd;
    background-color: #fff;
    color:#000;
  }
  .active{
    background-color: rgb(122, 188, 241);
    color:#fff;
  }
</style>
